<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()">
				<image src="../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="text f36 cfff">供应商信息</view>
			<view class="btn">
				<view class="define f30" @tap="save">保存</view>
			</view>
		</view>

		<view class="supplierinfo">

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">* 姓名</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入供应商名称" v-model="name" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">联系人</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入联系人" v-model="contact" />
					<image src="../../static/images/icon_person.png" mode="aspectFit" @click="visitContacts()" ></image>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">手机</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入手机号" v-model="tel" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">电话</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入电话号" v-model="mobile"/>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">所属地区</view>
				</view>
				<view class="right">
					<pickerAddress class="f30 c999" @change="change">{{province==''?'点我选择所在地区':province}}{{city}}{{area}}</pickerAddress>
					<image src="../../static/images/arrow_right.png" mode="aspectFit" style="width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">详细地址</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入详细地址" v-model="address" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">初始应付款</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入初始应付款" v-model="debt" />
				</view>
			</view>

			<view class="supplier-item">
				<view class="left">
					<view class="name f30 c333">备注</view>
				</view>
				<view class="right">
					<input type="text" placeholder="请输入备注信息" v-model="remark" />
				</view>
			</view>
		</view>

	  

	</view>
</template>

<script>
	  import nativeCommon from '../../js_sdk/WH-VisitContacts/native.common.js';
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
	export default {
		components: {
			pickerAddress,
			
		},
		data() {
			return {
				province: '',
				city: '',
				area: '',
				supplierId:'',
				name:'',
				contact:'', //联系人
				mobile:'', //手机号
				tel:'', //电话
				address:'', //详细地址
				debt:'', //欠供应商款
				remark:'', //备注
		
			};
		},
		onShow() {
			this.supplierId=uni.getStorageSync('supplierId')
		
		},
		onLoad() {
         
		},
		methods: {
			     visitContacts() {
				let that=this;
			                nativeCommon.contacts.getContact(function(name, number){
			            that.contact=name
			            that.tel=number
						
								// this.tel=number
								console.log(this.name);
			                });
			            },
			change(data) {
				this.province=data.data[0]
				this.city=data.data[1]
				this.area=data.data[2]
			},
		
			//供应商添加
			save(){
				let that=this;
				that.$ajax('api/v1.supplier/add',{
					name:that.name,
					contact:that.contact,
					mobile:that.mobile,
					tel:that.tel,
					address:that.address,
					province:that.province,
					district:that.area,
					city:that.city,
					debt:that.debt,
					remark:that.remark
				}).then(res=>{
					if(res.code==1){
						that.$sToast('添加成功');
						that.$back();
					}
				}).catch(res=>{
					that.$sToast(res.message)
				})
			},
		
	
		}
		}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #249AF6;
		padding: 60upx 30upx 25upx 30upx;
		text-align: center;

		.arrow {
			image {
				width: 20upx;
				height: 40upx;
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			color: #fff;

			.define {
				margin-left: 30upx;
			}
		}
	}

	.supplierinfo {
		margin-top: 30upx;

		.supplier-item {
			background-color: $white-background;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2upx #eee solid;
			height: 105upx;
			line-height: 105upx;
			padding: 0 30upx;

			&:nth-child(5),
			&:nth-child(7),
			&:last-child {
				margin-top: 20upx;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					width: 20upx;
					height: 35upx;
				}

				input {
					width: 100%;
					font-size: 30upx;
					color: #999;
					height: 105upx;
					line-height: 105upx;
					text-align: right;
				}

				image {
					width: 44upx;
					height: 44upx;
					margin-left: 20upx;
				}
			}
		}
	}
 .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>
